<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/tools" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">管辖权分析</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 mt-4">
      <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-lg font-semibold mb-4">管辖权分析工具</h2>
        <p class="text-sm text-gray-500 mb-6">
          输入案件信息，分析确定管辖法院
        </p>

        <!-- 案件信息输入 -->
        <div class="space-y-4 mb-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              案由类型
            </label>
            <select
              v-model="caseType"
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none"
            >
              <option value="">请选择案由</option>
              <option value="civil">民事纠纷</option>
              <option value="commercial">商事纠纷</option>
              <option value="labor">劳动争议</option>
              <option value="marriage">婚姻家庭</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              原告住所地
            </label>
            <input
              v-model="plaintiffAddress"
              type="text"
              placeholder="请输入原告住所地"
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              被告住所地
            </label>
            <input
              v-model="defendantAddress"
              type="text"
              placeholder="请输入被告住所地"
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              合同履行地（如有）
            </label>
            <input
              v-model="contractAddress"
              type="text"
              placeholder="请输入合同履行地"
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none"
            />
          </div>
        </div>

        <!-- 分析按钮 -->
        <button
          @click="analyzeJurisdiction"
          class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-medium"
          :disabled="!canAnalyze"
        >
          <i class="fas fa-search mr-2"></i>
          分析管辖权
        </button>

        <!-- 分析结果 -->
        <div v-if="analysisResult" class="mt-6">
          <h3 class="text-md font-semibold mb-3">管辖权分析结果</h3>
          <div class="bg-gray-50 rounded-lg p-4 space-y-3">
            <div>
              <span class="text-sm font-medium text-gray-700">管辖法院：</span>
              <span class="text-blue-600 font-medium">{{ analysisResult.court }}</span>
            </div>
            <div>
              <span class="text-sm font-medium text-gray-700">管辖依据：</span>
              <span class="text-gray-600">{{ analysisResult.basis }}</span>
            </div>
            <div>
              <span class="text-sm font-medium text-gray-700">法律条文：</span>
              <span class="text-gray-600">{{ analysisResult.law }}</span>
            </div>
            <div>
              <span class="text-sm font-medium text-gray-700">注意事项：</span>
              <p class="text-gray-600 text-sm mt-1">{{ analysisResult.notes }}</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'JurisdictionAnalysis',
  setup() {
    const caseType = ref('')
    const plaintiffAddress = ref('')
    const defendantAddress = ref('')
    const contractAddress = ref('')
    const analysisResult = ref(null)

    const canAnalyze = computed(() => {
      return caseType.value && plaintiffAddress.value && defendantAddress.value
    })

    const analyzeJurisdiction = () => {
      // 模拟分析结果
      analysisResult.value = {
        court: '北京市朝阳区人民法院',
        basis: '被告住所地管辖',
        law: '《中华人民共和国民事诉讼法》第二十一条',
        notes: '根据被告住所地确定管辖法院，如被告住所地与经常居住地不一致的，由经常居住地人民法院管辖。'
      }
    }

    return {
      caseType,
      plaintiffAddress,
      defendantAddress,
      contractAddress,
      analysisResult,
      canAnalyze,
      analyzeJurisdiction
    }
  }
}
</script>
